<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网上书店</title>

		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div id="app">
			<ul class="layui-nav">
				<li class="layui-nav-item">
					<a href="index.html">主页</a>
				</li>
			
			<li  v-show="!loginflag" class="layui-nav-item" style="margin-left: 400px;">
				<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
			</li>
				<li  v-show="loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
					<dl class="layui-nav-child">
						<dd> <a href="user.html">个人中心</a></dd>
						<dd><a href="javascript:void(0);" onclick="clearAllCookie()">注销</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="order.html">我的订单</a>
					<dl class="layui-nav-child">
						<dd><a href="HistoryOrder.html">历史订单</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="shoppingcart.html">购物车<span class="layui-badge">{{shoppingcartnumber}}</span></a>
				</li>
				<li v-show="$cookies.get('userType')==1" class="layui-nav-item">
					<a href="myShop.html">创建商品</a>
					<dl class="layui-nav-child">
						<dd><a href="myShopOrder.html">商家订单</a></dd>
					</dl>
				</li>
			</ul>


			<div class="indexkeyword">

				<input v-model="keyword" placeholder="输入内容搜索" class="layui-input" style="width: 40%;float:left">

				<div class="fenleikuang">
					<label class="layui-form-label" style="padding: 0px;height:38px;left:20px;">
						<select name="asd" V-model="kind" style="width: 100%;height: 100%;">
							<option value="书名">按书名</option>
							<option value="分类">按分类</option>
							<option value="ISBN">按ISBN号</option>
							<option value="店铺">按店铺</option>
						</select>
					</label>
				</div>
				<div class="sousuobutton"><button @click="SI" class="layui-btn layui-btn-lg" style="height:38px;">搜索</button></div>
			</div>


			<div class="goods">
				<div class="index-null" v-show="shoppinglist.length==0">搜索无结果</div>

				<div class="index" v-if="shoppinglist[0]">
					<div class="index-image" id="0" @click="goToItem2">
						<img :src="shoppinglist[0].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[0].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="0" @click="goToItem"> {{shoppinglist[0].itemName}}</div>
					<div class="index-shop" id="0">
						{{shoppinglist[0].shopName}}
					</div>
				</div>
				<div class="index" v-if="shoppinglist[1]">
					<div class="index-image" id="1" @click="goToItem2">
						<img :src="shoppinglist[1].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[1].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="1" @click="goToItem"> {{shoppinglist[1].itemName}}</div>
					<div class="index-shop" id="1" >
						{{shoppinglist[1].shopName}}
					</div>
				</div>
				<div class="index" v-if="shoppinglist[2]">
					<div class="index-image" id="2" @click="goToItem2">
						<img :src="shoppinglist[2].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[2].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="2" @click="goToItem"> {{shoppinglist[2].itemName}}</div>
					<div class="index-shop" id="2" >
						{{shoppinglist[2].shopName}}
					</div>
				</div>
				<div class="index" v-if="shoppinglist[3]">
					<div class="index-image" id="3" @click="goToItem2">
						<img :src="shoppinglist[3].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[3].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="3" @click="goToItem"> {{shoppinglist[3].itemName}}</div>
					<div class="index-shop" id="3" >
						{{shoppinglist[3].shopName}}
					</div>
				</div>
	<div class="index" v-if="shoppinglist[4]">
					<div class="index-image" id="4" @click="goToItem2">
						<img :src="shoppinglist[4].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[4].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="4" @click="goToItem"> {{shoppinglist[4].itemName}}</div>
					<div class="index-shop" id="4" >
						{{shoppinglist[4].shopName}}
					</div>
				</div>
				
				<div class="index" v-if="shoppinglist[5]">
					<div class="index-image" id="5" @click="goToItem2">
						<img :src="shoppinglist[5].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[5].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="5" @click="goToItem"> {{shoppinglist[5].itemName}}</div>
					<div class="index-shop" id="5" >
						{{shoppinglist[5].shopName}}
					</div>
				</div>
				<div class="index" v-if="shoppinglist[6]">
					<div class="index-image" id="6" @click="goToItem2">
						<img :src="shoppinglist[6].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[6].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="6" @click="goToItem"> {{shoppinglist[6].itemName}}</div>
					<div class="index-shop" id="6" >
						{{shoppinglist[6].shopName}}
					</div>
				</div>
				<div class="index" v-if="shoppinglist[7]">
					<div class="index-image" id="7" @click="goToItem2">
						<img :src="shoppinglist[7].itemImage" style="width: 100%;height: 100%;" />
					</div>
					<div class="index-price">
						¥{{shoppinglist[7].itemPrice|keepTwoNum}}
					</div>
					<div class="index-name" id="7" @click="goToItem"> {{shoppinglist[7].itemName}}</div>
					<div class="index-shop" id="7" >
						{{shoppinglist[7].shopName}}
					</div>
				</div>

			</div>
			<div id="pageDiv" style="text-align: center;"></div>
		</div>



		<!-- 搜索框 -->





		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					page: 1,
					userShowName: "请登录",
					username: '',
					usertype: 0,
					keyword: '',
					shoppingcartnumber: 0,
					loginflag: false,
					shoppinglist: '',
					kind: '书名',
					init:false

				},
				filters: {
					keepTwoNum: function(value) {
						value = Number(value)
						return value.toFixed(2)
					}
				},
				methods: {
					goToItem: function(obj) {
						console.log("点击的id为" + obj.target.id)
						window.location.href = "item.html?itemId=" + this.shoppinglist[obj.target.id].itemId;
					},
					goToItem2: function(obj) {
						console.log("点击的id为" + obj.target.parentElement.id)
						window.location.href = "item.html?itemId=" + this.shoppinglist[obj.target.parentElement.id].itemId;
					},
					//跳转登陆页
					loginplease: function() {
						if (this.loginflag)
						{
							window.location.href = 'user.html'; //跳转主页
							}
						else
						{
							window.location.href = 'login.html'; //跳转主页
					}
					},
					//搜索商品原始方法(切换页面时用)
					searchitem: function(params,flag) {
	
						console.log(URL + '/index/itemList')
						console.log(params)
						axios.get(URL + '/index/itemList', {
								params
							})
							.then(function(response) {
								if (response.data.code == 1) {
									console.log(response)
									vm.shoppinglist = response.data.result
									if(!vm.init)
									{
									
									vm.getpage(response.data.count,1)
									vm.init=true
									
									}
									console.log(vm.shoppinglist)

								} else if (response.data.code == 0) {
									console.log(response.data.msg)
									vm.shoppinglist = [];

								}
								
							})
							.catch(function(error) {
							console.log(error.status)
									layui.use('layer', function(){
										layer.msg("数据库1小时无人访问自动休眠，请刷新一次再试，或联系管理员。")
});										
							console.log(error);
							});

					},
					//封装过的按条件搜索商品
					SI: function() {
						vm.init=false
						console.log("SI搜索")
						if (vm.kind == "书名")
							this.searchitem({
								itemName: vm.keyword,
								page: 1
							})
						else if (vm.kind == "ISBN")
							this.searchitem({
								ISBN: vm.keyword,
								page: 1
							})
						else if (vm.kind == "分类")
							this.searchitem({
								typeName: vm.keyword,
								page: 1
							})
						else if (vm.kind == "店铺")
							this.searchitem({
								shopName: vm.keyword,
								page: 1
							})

					},
					getpage: function(total,curr) {
						layui.use('laypage', function() {
							var laypage = layui.laypage;

							//执行一个laypage实例
							laypage.render({
								elem: 'pageDiv', //注意，这里的 test1 是 ID，不用加 # 号
								count: total, //数据总数，从服务端得到
								limit: 8,
								jump: function(obj, first) { //obj为当前页的属性和方法，第一次加载first为true
								console.log("laypage()")
								console.log(obj)
									//非首次加载 do something			
									vm.page=obj.curr;
									if (!first) {
										//清空以前加载的数据
										vm.shoppinglist = '';
										//调用加载函数加载数据
										if (vm.kind == "书名")
											vm.searchitem({
												itemName: vm.keyword,
												page: vm.page
											})
										else if (vm.kind == "ISBN")
											vm.searchitem({
												ISBN: vm.keyword,
												page: vm.page
											})
										else if (vm.kind == "分类")
											vm.searchitem({
												typeName: vm.keyword,
												page: vm.page
											})
										else if (vm.kind == "店铺")
											vm.searchitem({
												shopName: vm.keyword,
												page: vm.page
											})
										

									}

								},


							});
						})
					}

				},
				created: function() {
					// checklogin()
					checklogin().then(x => {
						if (x) {
							if ($cookies.get("userName") != null)
								this.username = $cookies.get("userName")
							if ($cookies.get("userShowName") !== null)
								this.userShowName = $cookies.get("userShowName");
							this.loginflag = $cookies.get("loginflag")
						}
							this.SI()
					})
				
					
				},
				mounted:function(){
				
				}

			})
		</script>


		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			})
		</script>

	</body>
</html>
